/**
 *@Description: 编辑账号信息
 *Author: zfx
 *@Date: 2018-08-06 11:30:01
 *@Copyright: Created by Panxsoft.
 */
<template>
	<div class="v-admin-account-edit">
		<Form
			ref="formValidate"
			:model="formValidate"
			:rules="ruleValidate"
			:label-width="labelWidth(110,80)">
			<Form-item
				:label="$t('equipment.skin_detector_type')"
				prop="skin_detector_ids">
				<Select
					v-model="formValidate.skin_detector_ids"
					clearable
					filterable
					transfer
					multiple>
					<Option
						v-for="( value , key) in skinDetectors"
						:value="key + ''"
						:key="key">
						{{ value }}
					</Option>
				</Select>
			</Form-item>

			<Form-item
				:label="$t('equipment.device_number')"
				prop="account">
				<i-input
					v-model="formValidate.account"
					:placeholder="$t('equipment.please_enter_account_number')"
					type="text"/>
			</Form-item>

			<Form-item
				:label="$t('equipment.login_password')"
				prop="password">
				<i-input
					v-model="formValidate.password"
					:placeholder="$t('equipment.please_enter_password')"
					type="text"/>
			</Form-item>

			<Form-item>
				<Button
					type="primary"
					@click="handleSubmit('formValidate')">
					{{ $t('common.update') }}
				</Button>
			</Form-item>
		</Form>
	</div>
</template>

<script>

import labelWidthMixin from 'src/views/mixins/labelWidthMixin';

export default {
	name: 'AccountEdit',
	mixins: [labelWidthMixin],
	props: {
		accountDetails: {
			type: Object,
			default() {
				return {};
			},
		},
		skinDetectors: {
			type: Object,
			default() {
				return {};
			},
		},
		showModal: {
			type: Boolean,
			default() {
				return {};
			},
		},
	},
	data() {
		return {
			formValidate: {
				skin_detector_ids: [], // 肤质检测仪
				account: '',
				password: '',
			}, // 更新账号表单

			ruleValidate: { // 表单验证规则
				skin_detector_ids: [
					{
						// required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.skin_detector_type') }),
						type: 'array',
						trigger: 'blur,change',
					},
				],
				account: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.device_number') }),
						trigger: 'blur,change',
					},
				],
				password: [
					{
						message: this.$t('validate.required', { field: this.$t('equipment.login_password') }),
						trigger: 'blur,change',
					},
				],
			},
		};
	},

	watch: {
		accountDetails() {
			if (this.accountDetails.skin_detectors) {
				this.formValidate.skin_detector_ids = this.accountDetails.skin_detectors.map(item => String(item.id));
				this.formValidate.account = this.accountDetails.account;
			}
		},
		showModal() {
			if (!this.showModal) {
				this.handleReset('formValidate');
			}
		},
	},

	methods: {
		/**
         * 更新
         * @param {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.$emit('post', this.postData());
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         *重置表单
         *@param {string} name {表单的ref}
         *@return {undefined}
         */
		handleReset(name) {
			this.$refs[name].resetFields();
		},

		/**
         * post数据
         * @return {Object} {拼接好的formdata数据}
         */
		postData() {
			const new_object = {
				id: this.accountDetails.id,
				skin_detector_ids: this.formValidate.skin_detector_ids,
				account: this.formValidate.account,
				password: this.formValidate.password,
			};

			const form_data = new FormData();
			Object.keys(new_object).forEach((key) => {
				switch (key) {
				case 'skin_detector_ids':
					new_object[key].forEach((tag, index) => {
						form_data.append(`${key}[${index}]`, tag);
					});
					break;

				default:
					form_data.append(key, new_object[key]);
					break;
				}
			});
			return form_data;
		},
	},
};
</script>
